import React, { useState } from 'react'
import { NavBar, Space, Toast } from "antd-mobile";
import { useNavigate } from 'react-router-dom';
import { Button, SearchBar } from "antd-mobile";
import style from './index.module.css'
import { renmenApi } from '../../api/index'
import { useLoaderData } from 'react-router-dom';
import { IndexBar, List } from "antd-mobile";
import { dingweiApi } from "../../api/index";
import { sousuoApi } from '../../api/index'
import { Switch } from "antd-mobile";
import {
  UnorderedListOutline,
  PayCircleOutline,
  SetOutline,
  ArrowsAltOutline,
} from "antd-mobile-icons";
function Index() {
    let nav = useNavigate()
    let loader = useLoaderData()
    const [data,setDate]=useState([])
    const onChange =async (kw) => {
        console.log(kw)
        if (kw.length!=0) {
            const { data: res2 } = await sousuoApi(kw)
            console.log(res2)
            setDate(res2)
        } else {
            setDate([])
        }
    }
  return (
    <div>
      <NavBar onBack={() => nav(-1)} className={style.pp}>
        <SearchBar placeholder="请输入内容" onChange={onChange} />
      </NavBar>
      <div>
        <div>
          {data.map((item, index) => {
              return <List.Item key={index}>{ item.name}</List.Item>;
          })}
        </div>
        <div>
          当前历史:
          {loader.dingwei}
        </div>
        <h2 className={style.lk}>热门城市</h2>
        <ul className={style.op}>
          {loader.remen.map((item, index) => {
            return <li key={index}>{item.name}</li>;
          })}
        </ul>
      </div>
      <div>
        <h2>列表</h2>
        <IndexBar style={{ height: "800px" }}>
          {loader.liebiao.map((group) => {
            const { title, items } = group;
            return (
              <IndexBar.Panel
                index={title}
                title={`标题${title}`}
                key={`标题${title}`}
              >
                <List>
                  {items.map((items, index) => (
                    <List.Item key={index}>{items.name}</List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            );
          })}
        </IndexBar>
      </div>
    </div>
  );
}

export default Index
export const loader = async () => {
    const { data:res } = await renmenApi()
    console.log(res)
    const { data: res1 } = await dingweiApi("f5bfc79b04c462e3fc06fd25b6c44731");
    console.log(res1);
    return { remen: res.hotCities, liebiao: res.cityList, dingwei:res1.city };
}
